<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册用户</title>
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/tojson.js"></script>
    <script src="js/check.js"></script>
    <script src="js/prefix.js"></script>
    <script src="js/welcome.js"></script>
    <script>
        function existUser(username){
            var exist=false;
            $.ajax({
                url:URL_PREFIX+"/user/existUser/"+username,
                type:"get",
                async:false,
                statusCode:{
                    200:function (data) {
                        exist=data;
                    }
                }
            });
            return exist;
        }
        $(function () {
            $("#username").change(function () {
                if($("#username").val()!="" && existUser($("#username").val())){
                    $("#u_span1").html("");
                    $("#u_span").html("&#8855;");
                }else{
                    $("#u_span").html("");
                    $("#u_span1").html("&#9786;");
                }
            });
            $("#password1").change(function () {
                if($("#password").val()!=$("#password1").val()){
                    $("#p_span").html("&#8855;");
                }else{
                    $("#p_span").html("");
                }
            });
            $("#email").change(function () {
                if($("#email").val()!="" && !checkEmail($("#email").val())){
                    $("#e_span").html("&#8855;");
                }else{
                    $("#e_span").html("");
                }
            });
            $("#phonenumber").change(function () {
                if($("#phonenumber").val()!="" && !checkPhone($("#phonenumber").val())){
                    $("#ph_span").html("&#8855;");

                }else{
                    $("#ph_span").html("");
                }
            });
            $("#Submit").click(function () {
                var username=$("#username").val();
                var password=$("#password").val();
                var password1=$("#password1").val();
                var realName=$("#xm").val();
                var email=$("#email").val();
                var phonenumber=$("#phonenumber").val();
                if(username==""){
                    alert("用户名不能为空！");
                    return;
                }
                if(existUser(username)){
                    alert("用户名已存在！请尝试其他用户名")
                }
                if(password=="" || password1==""){
                    alert("请填写密码（确认密码）！");
                    return;
                }
                if(realName==""){
                    alert("请填写真实姓名！");
                    return;
                }
                if(email==""){
                    alert("请填写邮箱！");
                    return;
                }else{
                    if(!checkEmail(email)){
                        alert("邮箱格式错误！");
                        return;
                    }
                }
                if(phonenumber=="") {
                    alert("请填写手机号码！");
                    return;
                }else{
                    if(!checkPhone(phonenumber)){
                        alert("手机号格式有误!");
                        return;
                    }
                }
                if(confirm('当前版本暂不支持修改个人信息功能，请确保信息无误，是否继续？')){
                    $.ajax({
                        url:URL_PREFIX+"/user/reg",
                        type:"post",
                        data:JSON.stringify($("#form1").serializeObject()),
                        contentType:"application/json",
                        statusCode:{
                            200:function () {
                                if(confirm("注册成功！是否前往登录？")){
                                    window.location="login.html";
                                }else{
                                    window.location="index.html";
                                }
                            }
                        }
                    })
                }
            })
        })
    </script>
</head>
<body>
<div id="menu"></div>
<div class="menu" style="margin-top: 20px">
    <a href="index.html" class="a"><b><font color="BLACK" size="2">&lt;&lt; 主菜单</font></b></a>
</div>
<div id="leftSide">
    <fieldset>
        <legend>账号注册</legend>
        <form class="form" id="form1">
            <label for="username">用户名</label>
            <div class="div_textbox">
                <input type="text" name="userName" id="username" class="textbox" maxlength="20" value="" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')">
                <span style="color: red" id="u_span" title="用户名已存在！"></span>
                <span style="color: #ba9d37" id="u_span1" title="有没有发现打不上中文？">&#9786;</span>
            </div>
            <label for="password">密码</label>
            <div class="div_textbox">
                <input type="password" name="password" id="password" class="textbox" maxlength="16" value="">
            </div>
            <label for="password1">确认密码</label>
            <div class="div_textbox">
                <input type="password" name="password1" id="password1" class="textbox" maxlength="16" value="">
                <span style="color: red" id="p_span" title="两次输入的密码不相同！"></span>
            </div>
            <label for="xm">姓名</label>
            <div class="div_textbox">
                <input type="text" name="realName" id="xm" class="textbox" value="">
                <span style="color: red" id="xm_span" title=""></span>
                <span style="color: #ba9d37" id="xm_span1" title="请填写真实姓名（不想填填个昵称也行啊）">&#9786;</span>
            </div>
            <label for="email">邮箱</label>
            <div class="div_textbox">
                <input type="email" name="email" id="email" class="textbox" value="">
                <span style="color: red" id="e_span" title="邮箱格式错误！"></span>
                <span style="color: #ba9d37" id="e_span1" title="填个真实的邮箱总行吧？">&#9786;</span>

            </div>

            <label for="phonenumber">手机号码</label>
            <div class="div_textbox">
                <input type="text" name="phoneNumber" id="phonenumber" class="textbox" value="">
                <span style="color: red" id="ph_span" title="标准的手机号格式：1[356789]+9位纯数字！"></span>
                <span style="color: #ba9d37" id="ph_span1" title="手机号填不填真实的都行，不会骚扰您的^_^">&#9786;</span>
            </div>

            <div class="button_div">
                <input id="Submit" type="button" value="注册" class="buttons" title="点击注册">
            </div>
        </form>
    </fieldset>
</div>
</body>
</html>